<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			div{
				width: 100px;
				height: 100px;				
			}
			.box1{
				background: red;
			}
			.box2{
				background: green;
				position: relative;
				top: 0px;
				/* right:20px; */
				/* bottom:10px; */
				left: 0px;
				/* margin-top: 50px; */
				/* margin-bottom: 50px;				 */
			}
			.box3{
				background: blue;
				position: relative;
				/* top:20px;
				left:20px */
			}
			span{
				position: relative;
				width: 100px;
				height: 100px;
				background: red;
			}
			
			input{
				height: 30px;
			}
			
			img.vc{
				position: relative;
				top: 19px;
				left: 3px;
			}
			
		</style>
	</head>
	<body>
		<!-- 
		 1定位流分类
		 1-1相对定位
		 1-2绝对定位
		 1-3固定定位
		 1-4静态定位(默认，无定位)
		 
		 2什么是相对定位?
		 相对定位就是相对于自己以前在标准流中的位置来移动
		 
		 3格式		 
		 position : relative;		 
		 top: ;		 
		 right: ;		 
		 bottom: ;		 
		 left: ;
		 
		 4.注意点
		 4.1相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
		 4.2在相对定位中同一个方向上的定位属性只能使用一个
		 4.3由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
		 4.4由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局
		 
		5.相对定位应用场景
		5.1用于对元素进行微调
		5.2配合后面学习的绝对定位来使用 
		 
		 -->
		 <div class="box1"></div>
		 <div class="box2"></div>
		 <div class="box3"></div>
		 
		 <!-- 相对定位中是区分块级元素/行内元素/行内块级元素 -->
		 <span>我是span</span>
		 <p>
			<input type="text" name="" id="">
			<img src="img/vc.PNG" alt="" class="vc"> 
		 </p>
		 
	</body>
</html>
